/**
 * cateGory: 柱状图 + 堆叠图
 */
import { xAxisCommon, yAxisCommon, colorCommon } from '../common-option'
import { mergeOption, setSeries } from '../util'
export default {
  name: 'barStack',
  option(param) {
    return mergeOption(param, {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        bottom: 0,
        width: 'auto',
        itemWidth: 10,
        itemHeight: 10,
        icon: 'rect',
        textStyle: {
          color: '#999'
        },
        data: []
      },
      color: colorCommon,
      grid: {
        left: '0',
        right: '0',
        top: '30px',
        bottom: '30px',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [],
        ...xAxisCommon
      },
      yAxis: {
        type: 'value',
        name: '',
        ...yAxisCommon
      },
      // toolbox: {
      //   feature: {
      //     dataView: {
      //       show: true,
      //       title: '表格数据',
      //       lang: ['表格数据', '关闭'],
      //       buttonColor: '#ff791a',
      //       readOnly: true,
      //       emphasis: {
      //         iconStyle: {
      //           borderColor: '#ff791a'
      //         }
      //       },
      //       optionToContent(opt) {
      //         const cols = ['名称', ...opt.xAxis[0].data]
      //         const data = opt.series
      //         const table = `<table class="dataViewTable">
      //             <thead>
      //               <tr class="dataViewTr">
      //                 ${cols
      //                   .map((item) => {
      //                     return `<td class="dataViewHead">${item}</td>`
      //                   })
      //                   .join('')}
      //                   </tr>
      //                   </thead>
      //                   <tbody>
      //                   ${data
      //                     .map((item) => {
      //                       return `<tr class="dataViewTr">
      //                   <td class="dataViewTd">${item.name}</td>
      //                   ${item.data
      //                     .map((item2) => {
      //                       return `<td class="dataViewTd">${item2}</td>`
      //                     })
      //                     .join('')}
      //                 </tr>`
      //                     })
      //                     .join('')}
      //             </tbody>
      //           </table>`
      //         return table
      //       }
      //     }
      //   }
      // },
      series: setSeries({ series: param.series })
    })
  }
}
